/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-09-01 09:15:51
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-08 16:10:20
 * @FilePath: \cxl-admin\src\pages\statisticsManage\consume\list\index.ts
 */
import { onMounted, onUnmounted, ref } from 'vue'
import BaseChart, { eOption } from '../../baseChart'
import { consumeCityChart, consumeYearChart } from '@/apis/statistics/consume'

export default class StatistiscConsumeData {
    productChart: any
    provinceChart: any
    productOption = {
        tooltip: {
            trigger: 'axis'
        },
        legend: { bottom: 10, data: [''] },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '50',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'item',
                type: 'line',
                stack: 'Total',
                data: ['']
            }
        ]
    }

    provinceOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: ['']
        },
        series: [
            // {
            //     name: '出险查询量',
            //     type: 'bar',
            //     data: []
            // },
            // {
            //     name: '维保查询量',
            //     type: 'bar',
            //     data: []
            // },
            // {
            //     name: '新能源查询量',
            //     type: 'bar',
            //     data: []
            // },
            {
                name: '总查询量',
                type: 'bar',
                data: ['']
            }
        ]
    }
    currentYear = ref('')
    constructor() {
        const oDate = new Date()
        this.currentYear.value = oDate.getFullYear() + ''

        onMounted(() => {
            this.init()
        })
        onUnmounted(() => {
            this.provinceChart.destory()
        })

        this.getProductSearch(this.currentYear.value)
        this.getCitySituation()
    }
    init() {
        this.productChart = new BaseChart('product')
        this.provinceChart = new BaseChart('province')
    }
    //按产品查询量分类
    getProductSearch(year: string) {
        consumeYearChart(year).then(res => {
            if (res.data.value === 200) {
                this.productChart.destory()
                this.productChart = new BaseChart('product')
                const productTypeArr: string[] = ['出险', '维保', '新能源']
                this.productOption.xAxis.data.length = 0
                this.productOption.legend.data.length = 0
                this.productOption.series.length = 0
                this.productOption.legend.data.push(...productTypeArr)

                productTypeArr.forEach(item => {
                    this.productOption.series.push({
                        name: item,
                        type: 'line',
                        stack: 'Total',
                        data: []
                    })
                })
                const arr = res.data.data
                arr.sort((x: any, y: any) => x.month - y.month)
                arr.forEach((item: any) => {
                    this.productOption.xAxis.data.push(item.month + '月')
                    //出险
                    this.productOption.series[0].data?.push(item.crashNum)
                    //维保
                    this.productOption.series[1].data?.push(item.maintenanceNum)
                    //新能源
                    this.productOption.series[2].data?.push(item.powerBatteryNum)
                })
                this.productChart.init(this.productOption)
            }
        })
    }
    //按各市查询情况分类
    getCitySituation() {
        consumeCityChart().then(res => {
            if (res.data.value === 200) {
                this.provinceOption.yAxis.data.length = 0
                this.provinceOption.series[0].data.length = 0
                res.data.data.forEach((item: any) => {
                    this.provinceOption.yAxis.data.push(item.cityName ? item.cityName : '其它')
                    // this.provinceOption.series[0].data.push(item.crashNum)
                    // this.provinceOption.series[1].data.push(item.maintenanceNum)
                    // this.provinceOption.series[2].data.push(item.powerBatteryNum)
                    this.provinceOption.series[0].data.push(item.totalNum)
                })
                console.log(this.provinceOption)
                this.provinceChart.init(this.provinceOption)
            }
        })
    }
    //监听选择的年
    onYearChange = (res: any) => {
        console.log(res)
        this.getProductSearch(res)
    }
}
